<template>
	<view class="page">
		<view class="u-p-20">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="设置钱包密码" :label-style="labelStyle" prop="password">
					<u-input v-model="form.password" type="password" placeholder="请输入钱包密码,6-16位,数字,英文大小写" />
				</u-form-item>
				<u-form-item label="确认钱包密码" :label-style="labelStyle" prop="confirmPassword">
					<u-input v-model="form.confirmPassword" type="password" placeholder="请再次输入钱包密码" />
				</u-form-item>
				<view class="tips">
					<view style="color:red;font-weight: bold;">钱包密码无法找回，请务必妥善保管！</view>
					<view style="color:red;font-weight: bold;">钱包密码无法找回，请务必妥善保管！</view>
					<view style="color:red;font-weight: bold;">钱包密码无法找回，请务必妥善保管！</view>
				</view>
			</u-form>
		</view>
		<view class="create-box">
			<u-checkbox-group>
				<u-checkbox v-model="protocol" active-color="#FE572A">
					<view class="create-p">
						<text>我已详细阅读并同意</text>
						<text class="link">《数字钱包服务协议》</text>
					</view>
				</u-checkbox>
				<u-checkbox v-model="agree" active-color="#FE572A">
					<view class="create-p">
						<text>我知晓钱包密码无法找回，并已妥善保存钱包密码。</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
			<button class="create-btn" :disabled="!protocol || !agree || disabled" @click="renderScript.createWallet">创建钱包</button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		NftWalletApi
	} from "@/api/modules/NftWallet.js"
	import {
		validatePassword,
    encryptWallet
	} from "@/common/utils/utils.js"
	export default {
		data() {
			return {
				disabled:false,
				protocol: false,
				agree: false,
				labelStyle: {
					fontSize: '28rpx'
				},
				form: {
					password: "",
					confirmPassword: ""
				},
				rules: {
					password: {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					confirmPassword: {
						type: 'string',
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			...mapMutations("user", [
				"SET_WALLET_ADDRESS",
				"SET_WALLET_PRIVATEKEY",
			]),
			handleCreateWallet(wallet) {
				this.$refs.uForm.validate(async (valid) => {
					if (!valid) return;
					if (!validatePassword(this.form.password.trim())) {
						return this.$Toast("密码必须为 6-16 位，包含大小写字母和数字");
					}
					if (this.form.password.trim() !== this.form.confirmPassword.trim()) {
						return this.$Toast("确认密码与密码不匹配");
					}
					this.$ShowLoading()
					this.disabled = true
					const {
						privateKey,
						address,
						password
					} = this.formatWallet(wallet)
					const params = {
						sk_key: privateKey,
						address,
						password
					}
					try {
						const res = await NftWalletApi.saveNftWallet(params)
						if (res.code == 1) {
							this.SET_WALLET_ADDRESS(params.address)
							this.SET_WALLET_PRIVATEKEY(privateKey)
							uni.showModal({
								title: "钱包创建成功",
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: "/pages/mine/mineBalance/asset/asset"
										})
									}
								}
							})
						} else {
							this.$HideLoading()
							this.disabled = false
							this.$Toast(res.msg);
						}
					} catch {
						this.$HideLoading()
						this.disabled = false
					} finally {
						this.$HideLoading()
						this.disabled = false
					}

				});
			},
			formatWallet(wallet) {
				const {
					privateKey,
					password
				} = encryptWallet(wallet.privateKey, this.form.password)
				return {
					address: wallet.address,
					privateKey,
					password
				}
			},
      
		}
	}
</script>
<script module="renderScript" lang="renderjs">
import { Wallet } from "ethers";
	export default {
		methods: {
      createWallet(event, ownerInstance) {
				const wallet = Wallet.createRandom();
        ownerInstance.callMethod('handleCreateWallet',{
          privateKey:wallet.signingKey.privateKey,
          address:wallet.address
        })
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		position: relative;
		/* #ifdef H5 */
		min-height: calc(100vh - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		min-height: 100vh;
		/* #endif */
	}

	.tips {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 40rpx;

		view {
			font-size: 28rpx;
		}
	}

	.create-box {
		position: absolute;
    // #ifdef H5
		bottom: 32rpx;
    // #endif
    // #ifdef APP-PLUS
		bottom: 128rpx;
    // #endif
		left: 32rpx;
		right: 32rpx;
	}

	.create-p {
		font-size: 28rpx;

		text {
			color: red;
		}

		.link {
			color: #2979ff;
		}
	}

	.create-btn {
		background-color: var(--mainColor);
		font-size: 28rpx;
		color: #fff;
		margin-top: 20rpx;
	}
</style>